<template>
	<div class="contains">
		 <div class="login-header">
			  <image src="../../assets/images/register.png" mode=""></image>
			  <div class="logo"></div>
		 </div>
		 <div class="login-form">
			  <div class="login-form-grop">
				   <div class="login-form-icon">
					    <image src="../../assets/images/icon-phone.png" mode=""></image>
				   </div>
				   <div class="login-form-input">
					    <input type="text" value="" @input="handleInput" placeholder="请输入手机号"/>
				   </div>
			  </div>
			  <div class="login-form-grop" style="border-bottom: none; padding-top: 10px;">
				   <button type="default" @click="toSubmit">立即申请</button>
			  </div>	  
		 </div>
	</div>
</template>

<script>
	import { shoperRegister } from '../../../api/index.js';
	export default {
	  components:{
	  },
	  data(){
		 return {
			 is_login:false,
			 mobile:'',
		 }
	  },
	  onShow() {
		 this.$Fun.checkLogin((res)=>{
			 
		 });
	  },
	  created(){
	  },
	  mounted(){
	  },
	  methods:{
		handleInput(e){
			console.log(e);
			this.mobile = e.detail.value;
		},  
		toSubmit(){
		   shoperRegister({name:this.mobile}).then(res=>{
			   
		   })	
		}
	  },
	};
</script>

<style>
	.login-header { position: relative; width: 100%;}
	.login-header image { width: 100%;}
	.logo { width: 60px; height: 60px; background: red; border-radius: 30px; position: absolute; top: 20%; left: 50%; margin-left: -30px;}
	.login-form { width: 85%; padding-top: 20px; margin: 0 auto;}
	.login-form-grop { position: relative; width: 100%; height: 50px; margin-bottom: 10px; border-bottom: 1px solid #eee;}
	.login-form-input { width: 100%; height: 50px;}
	.login-form-input input { padding-left: 10%; width: 90%; height: 50px; line-height: 50px; }
	.login-form-icon { width: 23px; height: 30px;  position: absolute; top: 10px; left: 5px;}
	.login-form-icon image { width: 100%; height: 100%;}
	.login-form-grop button { background: #214bfa; color: aliceblue;}
	.login-form-grop p { text-align: center; color: #214bfa; margin-top: 10px;}
	.third-passport { margin-top: 50px; text-align: center; }
	.third-passport .third-item { width: 50px; height: 46px; margin: 0 30px; display: inline-block;}
	.third-passport .third-item image { width: 100%; height: 100%;}
</style>